<template>
  <el-main>
    <el-row>
      <el-container>
        <el-header>
          <div class="sta-header">高标准农田投资信息
            <div class="sta-header-xzq">{{ selectXzqName }}</div>
          </div>
          <div class="xzqDiv">
            <div class="xzqexplain">行政区划：</div>
            <XzqList ref="xzqlistCom" class="xzqlist"></XzqList>
          </div>
        </el-header>
        <el-main>
          <el-row :gutter="20"><!--gutter是左右间隔，表示左右的padding各10px-->
            <el-col :xs="12" :sm="12" :lg="lgSpan" v-for="profileValue in profileValues">
              <div class="profileValue-label">{{ profileValue.name }}</div>
              <div class="profileValue-value">{{ profileValue.value }}</div>
              <!--              <el-progress :stroke-width="10"-->
              <!--                           :percentage="profileValue.percentage"-->
              <!--                           :show-text="profileValue.hasOwnProperty('showPercentText')&&profileValue.showPercentText"-->
              <!--                           :format="getProgressFormat"-->
              <!--              ></el-progress>-->
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-container>
          <el-header>已建成项目投资情况（万元）</el-header>
          <el-main>
            <el-col :span="24" class="ct-heigh50">
              <xChartWrapper :item="jdCharts"></xChartWrapper>
            </el-col>
          </el-main>
        </el-container>
      </el-col>
      <el-col :span="16" class="ct-heigh50">
        <el-container>
          <el-header>已建成项目总投资详情
            <el-button-group style="float: right">
              <el-button type="primary" plain icon="el-icon-menu" @click="clickXZQ">行政区</el-button>
              <el-button type="primary" plain icon="el-icon-s-help" @click="clickYear">年度</el-button>
            </el-button-group>
          </el-header>
          <el-main>

            <el-col :span="24" class="ct-heigh50">
              <wrapperItem :item=gbzxmXZQChart v-if="gbxzmShowType==='xzq'"></wrapperItem>
              <wrapperItem :item=gbzxmYearChart v-if="gbxzmShowType==='year'"></wrapperItem>
            </el-col>
          </el-main>
        </el-container>
      </el-col>
    </el-row>
    <el-row>
      <el-container>
        <el-header>已建成高标准农田项目总投资金额（万元）</el-header>
        <el-main>
          <el-row :gutter="20">
            <el-table
              :data="yjcTable.tableData"
              style="width: 100%"
              :header-cell-style="{background:'#c5d9f8',color:'#63666b'}"
            >
              <el-table-column
                v-for="(item,i) in yjcTable.tablecols"
                :prop="item.field"
                :label="item.title"
              >
              </el-table-column>
            </el-table>
          </el-row>
        </el-main>
      </el-container>
    </el-row>
  </el-main>
</template>

<script>
import xMoni from '@/components/bigScreen/xWrapper/xMoni'
import xChartWrapper from '@/components/bigScreen/xWrapper/xChartWrapper'
import wrapperItem from '@/components/bigScreen/xWrapper/wrapperItem'
import cc from '@/components/bigScreen/js/commonConfig'
import Bus from '@/utils/bus'
import XzqList from '@/components/Xzq/XzqList'
import {
  getCityYearStaData,
  getGbzRunProjectSta,
  getProvinceYearStaData,
  getGbzCBProjectSta, getUserXZQ
} from '@/api/gbznt/gbzCommon'
import * as globalcf from '@/utils/Global/GlobalCommonFunction'

export default {
  name: 'proInvestStatis',
  components: { xMoni, xChartWrapper, wrapperItem, XzqList },
  created() {
    this.getXZQYearData(this.xzqData)
    Bus.$on('proStatisChangeXZQ', msg => {
      //msg[0]现在为xzq的对象
      this.getXZQYearData(msg[0])
    })
  },
  props: {
    lgSpan: {
      type: Object,
      default() {
        return { span: '4-8' }
      }
    }
  },
  mounted() {
    this.getCurrentUserXZQ()
    //  this.$refs.xzqlistCom.changeSelectName('呵呵');
  },
  computed: {},
  data() {
    return {
      selectXzqName: null,
      gbxzmShowType: '',
      profileValues: [
        { type: 'yjcZTZ', name: '已建成-总投资(万元)', value: null, percentage: 100 },
        { type: 'yjcZYTZ', name: '已建成-中央投资(万元)', value: null, percentage: 100, showPercentText: true },
        { type: 'yjcDFTZ', name: '已建成-地方投资(万元)', value: null, percentage: 50, showPercentText: true },
        { type: 'yjcSHTZ', name: '已建成-社会投资(万元)', value: null, percentage: 30, showPercentText: true },
        { type: 'cbkArea', name: '建设中-总投资(万元)', value: null, percentage: 0 }
        // { type: 'cbkCount', name: '储备库项目数（个）', value: null, percentage: 0 }
      ],
      monis: [
        {
          labelOption: {
            title: '耕地保有量',
            value: '54213',
            level: 'green',
            unit: 'km²'
          }
        },
        {
          labelOption: {
            title: '耕地保有量',
            value: '54213',
            level: 'green',
            unit: 'km²'
          }
        },
        {
          labelOption: {
            title: '耕地保有量',
            value: '54213',
            level: 'green',
            unit: 'km²'
          }
        },
        {
          labelOption: {
            title: '耕地保有量',
            value: '54213',
            level: 'green',
            unit: 'km²'
          }
        }
      ],
      jdCharts: {
        type: 'xchart-wrapper', //图表标识
        width: '100%',
        height: '100%',
        chartOption: {
          type: 'ring',
          color: cc.colors.blues,
          legend: { orient: 'horizontal', x: 'right', y: 'bottom', color: '#000000', show: true },
          series: [{
            name: '金额（万元）',
            labelLineShow: true,
            avoidLabelOverlap: false,
            center: ['50%', '50%'],
            data: [
              {
                type: 'tz_zytz',
                name: '中央投资(万元)',
                value: 0
              },
              {
                type: 'tz_dftz',
                name: '地方投资(万元)',
                value: 0
              },
              {
                type: 'tz_shtz',
                name: '社会投资(万元)',
                value: 0
              }
            ]
          }
          ]

        }
      },
      gbzxmXZQChart: {
        type: 'wrapper',
        //  border: { show: true, borderType: 'border2' },
        width: '100%', height: '100%',
        // toolBox: { item: [{ type: 'full-screen', title: '全屏' }] },
        //  spacing: { col: true },
        // title: '高标准农田分布',
        wrapper: [
          {
            type: 'xchart-wrapper',
            width: '100%', height: '100%',
            //scrolling: {y: true},
            chartOption: {
              type: 'bar',
              color: cc.colors.blues,
              axis: {
                axisType: 'x', name: '单位：万元',
                nameGap: 1,
                color: '#000000',
                rotate: 45,
                //  data: ['哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市', '绥化市', '大兴安岭', '农垦总局'],
                data: [],
                splitLine: {
                  lineStyle: { color: cc.colors.standard1[0], type: 'dotted' }
                }
              },
              label: {
                color: '#000000'
              },
              legend: { show: false, color: '#000000' },
              series: [
                {
                  name: '万元', type: 'line',
                  //  data: [215, 15.50, 184.87, 111.21, 65.16, 18.07, 105.48, 21.55, 71.92, 40.21, 18.82, 43.22, 224.16, 291.57]
                  data: [],
                  label: {
                    // 柱图头部显示值
                    show: false,
                    position: "right",
                    color: "#56ffef",
                    fontSize: "14px",
                    formatter: (params) => {
                      return params.value[params.encode];
                      //return params.value[params.encode.x[0]];
                    },
                  }
                }
              ]
            }
          }]
      },
      gbzxmYearChartOriData: [],
      gbzxmYearChart: {
        datachange: 0,
        type: 'wrapper',
        //  border: { show: true, borderType: 'border2' },
        width: '100%', height: '100%',
        // toolBox: { item: [{ type: 'full-screen', title: '全屏' }] },
        //  spacing: { col: true },
        // title: '高标准农田分布',
        wrapper: [{
          type: 'xchart-wrapper',
          width: '100%', height: '100%',
          //scrolling: {y: true},
          chartOption: {
            type: 'bar',
            color: cc.colors.blues,
            axis: {
              axisType: 'x', name: '单位：万元',
              nameGap: 1,
              color: '#000000',
              rotate: 45,
              data: [],
              // data: ['2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'],
              splitLine: {
                lineStyle: { color: cc.colors.standard1[0], type: 'dotted' }
              }
            },
            label: {
              color: '#000000'
            },
            legend: { show: false, color: '#000000' },
            series: [
              {
                name: '万元', type: 'line', label: {
                  show: false//是否在柱状图上显示数字
                },
                // data: [50, 100, 84.87, 111.21, 65.16, 18.07, 105.48, 21.55, 71.92, 40.21, 18.82, 43.22, 224.16]
                data: []
              }
            ]
          }
        }]
      },
      typeWrappers: [
        {
          type: 'wrapper',
          width: '100%',
          height: '100%',
          wrapper: [
            {
              type: 'xchart-wrapper', //图表标识
              width: '100%',
              height: '80%',
              chartOption: {
                type: 'liquidfill',
                color: cc.colors.greenRed,
                data: [0.47, 0.42, 0.37]
              }
            },
            {
              type: 'xlabel-wrapper', //文本标识
              width: '100%',
              height: '20%',
              labelStyle: { type: 'title2' },
              labelOption: {
                title: '生态空间',
                trend: {
                  show: true,
                  type: 'down'
                }
              }
            }
          ]
        },
        {
          type: 'wrapper',
          width: '100%',
          height: '100%',
          wrapper: [
            {
              type: 'xchart-wrapper', //图表标识
              width: '100%',
              height: '80%',
              chartOption: {
                type: 'liquidfill',
                color: cc.colors.redHigh,
                data: [0.55, 0.45, 0.35]
              }
            },
            {
              type: 'xlabel-wrapper', //文本标识
              width: '100%',
              height: '20%',
              labelStyle: { type: 'title2' },
              labelOption: {
                title: '城镇空间',
                trend: {
                  show: true,
                  type: 'up'
                }
              }
            }
          ]
        },
        {
          type: 'wrapper',
          width: '100%',
          height: '100%',
          wrapper: [
            {
              type: 'xchart-wrapper', //图表标识
              width: '100%',
              height: '80%',
              chartOption: {
                type: 'liquidfill',
                color: cc.colors.yellowHigh,
                data: [0.70, 0.60, 0.50]
              }
            },
            {
              type: 'xlabel-wrapper', //文本标识
              width: '100%',
              height: '20%',
              labelStyle: { type: 'title2' },
              labelOption: {
                title: '农业空间',
                trend: {
                  show: true,
                  type: 'down'
                }
              }
            }
          ]
        }
      ],
      yjcTable: {  //已建成高标准农田面积统计表
        tableData: [],
        tablecols: [],
        orianData: []
      },
      fieldArray_ch: [
        { 'f_field': 'xzqhdm', 'f_fieldcn': '行政区代码' },
        { 'f_field': 'xzqhmc', 'f_fieldcn': '行政区名称' },
        { 'f_field': 'xmcount', 'f_fieldcn': '项目个数' },
        { 'f_field': 'tz_ztz', 'f_fieldcn': '总投资' },
        { 'f_field': 'tz_zytz', 'f_fieldcn': '中央投资' },
        { 'f_field': 'tz_dftz', 'f_fieldcn': '地方投资' },
        { 'f_field': 'tz_shtz', 'f_fieldcn': '社会投资' },
        { 'f_field': 'zmj', 'f_fieldcn': '总面积' },
        { 'f_field': 'money2011', 'f_fieldcn': '2011年' },
        { 'f_field': 'money2012', 'f_fieldcn': '2012年' },
        { 'f_field': 'money2013', 'f_fieldcn': '2013年' },
        { 'f_field': 'money2014', 'f_fieldcn': '2014年' },
        { 'f_field': 'money2015', 'f_fieldcn': '2015年' },
        { 'f_field': 'money2016', 'f_fieldcn': '2016年' },
        { 'f_field': 'money2017', 'f_fieldcn': '2017年' },
        { 'f_field': 'money2018', 'f_fieldcn': '2018年' },
        { 'f_field': 'money2019', 'f_fieldcn': '2019年' },
        { 'f_field': 'money2020', 'f_fieldcn': '2020年' },
        { 'f_field': 'money2021', 'f_fieldcn': '2021年' },
        { 'f_field': 'money2022', 'f_fieldcn': '2022年' },
        { 'f_field': 'money2023', 'f_fieldcn': '2023年' },
        { 'f_field': 'money2024', 'f_fieldcn': '2024年' },
        { 'f_field': 'money2025', 'f_fieldcn': '2025年' },
        { 'f_field': 'money2026', 'f_fieldcn': '2026年' },
        { 'f_field': 'money2027', 'f_fieldcn': '2027年' },
        { 'f_field': 'money2028', 'f_fieldcn': '2028年' },
        { 'f_field': 'money2029', 'f_fieldcn': '2029年' },
        { 'f_field': 'money2030', 'f_fieldcn': '2030年' },
        { 'f_field': 'money2031', 'f_fieldcn': '2031年' },
        { 'f_field': 'money2032', 'f_fieldcn': '2032年' },
        { 'f_field': 'money2033', 'f_fieldcn': '2033年' },
        { 'f_field': 'money2034', 'f_fieldcn': '2034年' }

      ],
      xzqData: {
        code: '-1',
        level: '-1'
      },
      curUserXZQ: {}
    }
  },
  methods: {
    getProgressFormat(value) {
      return `${value}%`
    },
    getCurrentUserXZQ() {
      getUserXZQ().then(res => {
        let data = res.rows
        if (data != '') {
          this.curUserXZQ.name = data[0].f_name
          this.curUserXZQ.code = data[0].f_code
          this.curUserXZQ.pcode = data[0].f_pcode
          this.curUserXZQ.level = data[0].f_levels
          this.$refs.xzqlistCom.selectName = this.curUserXZQ.name
          this.selectXzqName = this.curUserXZQ.name
          this.$refs.xzqlistCom.selectValue = this.curUserXZQ.code
        }
      })
    },
    //从数据库查询图标需要数据
    getXZQYearData(xzq) {
      let that = this
      that.selectXzqName = xzq.label
      let xzqc = { 'xzqcode': xzq.code, 'xzqlevel': xzq.level }
      that.gbzxmYearChart = Object.assign({}, that.gbzxmYearChart)
      //查询所有已建成高标准投资信息（按照地级市+年份）
      getCityYearStaData(xzqc).then(res => {
        let data = res.rows
        that.yjcTable.orianData = data//这里害怕面积单位转换出问题，保留一个原始的。面积是亩
        if (data != '') {
          //面积单位修改。
          // data = that.convertAreaunit(data, '2')//对照北大荒一张图，公顷是1，万亩是2，亩是3，平方米是4，平方公里是5。注意高标准默认单位是亩
          //2022年7月5日 LQ 想修改wrapper内部的参数不好使，只能用下面的chartOption.axis.data这样，才会读出来真正数据
          //  that.childXZQArray = that.getChildXZQArray(data);
          that.gbzxmXZQChart.wrapper[0].chartOption.axis.data = that.getChildXZQArray(data)//
          that.gbzxmXZQChart.wrapper[0].chartOption.series[0].data = that.getXZQYearTZStaListData(data)
          that.yjcTable.tableData = data
          that.yjcTable.tablecols = that.getYjcTable(data)
          that.gbxzmShowType = 'xzq'
          Bus.$emit('reInitXChartsWrapper')
        }else{
          that.gbzxmXZQChart.wrapper[0].chartOption.axis.data = []
          that.gbzxmXZQChart.wrapper[0].chartOption.series[0].data =  []
          that.yjcTable.tableData =  []
          that.yjcTable.tablecols =  []
          that.gbxzmShowType = 'xzq'
          Bus.$emit('reInitXChartsWrapper')
        }
      })
      //查询所有已建成高标准农田面积（全省一条数据+年份）
      getProvinceYearStaData(xzqc).then(res => {
        let data = res.rows
        that.gbzxmYearChartOriData = data
        if (data != '') {
          //1.单位 转换，暂时先不用
          // data = that.convertAreaunit(data, '2')//对照北大荒一张图，公顷是1，万亩是2，亩是3，平方米是4，平方公里是5。注意高标准默认单位是亩
          //2.最上层的几个大统计值。
          this.profileValues.find((item, index) => {
            return item.type == 'yjcZTZ'//总投资
          }).value = data[0].tz_ztz
          this.profileValues.find((item, index) => {
            return item.type == 'yjcZYTZ'//中央投资
          }).value = data[0].tz_zytz
          this.profileValues.find((item, index) => {
            return item.type == 'yjcDFTZ'//已建成地方投资
          }).value = data[0].tz_dftz
          this.profileValues.find((item, index) => {
            return item.type == 'yjcSHTZ'//已建成社会投资
          }).value = data[0].tz_shtz
          //3.中间柱状图，点击了年份之后的图表数据
          let yd = that.getCurrentXZQYearArray(data[0])
          let adata = []
          let serdata = []
          for (let i = 0; i < yd.length; i++) {
            adata.push(yd[i].year)
            serdata.push(yd[i].ydata)
          }
          that.gbzxmYearChart.wrapper[0].chartOption.axis.data = adata
          that.gbzxmYearChart.wrapper[0].chartOption.series[0].data = serdata
          //  this.$forceUpdate();
          //4.投资饼状图
          that.jdCharts.chartOption.series[0].data = that.getTouZiData(data[0])
          this.$nextTick(() => {
            Bus.$emit('reInitXChartsWrapper')
            //   Bus.$emit('resizeXChartsWrapper')//必须resize一下表格，不然就会闪屏
          })
        }else{
          this.profileValues.find((item, index) => {
            return item.type == 'yjcZTZ'//总投资
          }).value = 0
          this.profileValues.find((item, index) => {
            return item.type == 'yjcZYTZ'//中央投资
          }).value = 0
          this.profileValues.find((item, index) => {
            return item.type == 'yjcDFTZ'//已建成地方投资
          }).value = 0
          this.profileValues.find((item, index) => {
            return item.type == 'yjcSHTZ'//已建成社会投资
          }).value = 0
          //3.中间柱状图，点击了年份之后的图表数据

          that.gbzxmYearChart.wrapper[0].chartOption.axis.data =[]
          that.gbzxmYearChart.wrapper[0].chartOption.series[0].data =[]
          //  this.$forceUpdate();
          //4.投资饼状图
          that.jdCharts.chartOption.series[0].data = []
          this.$nextTick(() => {
            Bus.$emit('reInitXChartsWrapper')
            //   Bus.$emit('resizeXChartsWrapper')//必须resize一下表格，不然就会闪屏
          })
        }
      })
      //查询正在建设中的项目总面积和数量。
      getGbzRunProjectSta(xzqc).then(res => {
        let data = res.rows
        if (data != '') {
          //1.面积单位 转换
          // data = that.convertAreaunit(data, '2')//对照北大荒一张图，公顷是1，万亩是2，亩是3，平方米是4，平方公里是5。注意高标准默认单位是亩
          this.profileValues.find((item, index) => {
            return item.type == 'cbkArea'//已建成面积
          }).value = data[0].tz_ztz
        }else{
          this.profileValues.find((item, index) => {
            return item.type == 'cbkArea'//已建成面积
          }).value = 0
        }
      })
      //如果有储备信息，就在这里加上一个函数把
      this.$nextTick(() => {
        Bus.$emit('reInitXChartsWrapper')
        //   Bus.$emit('resizeXChartsWrapper')//必须resize一下表格，不然就会闪屏
      })
    },

    getChildXZQArray(yzdata) {
      let xzqmcs = []
      let len = yzdata.length
      for (let i = 0; i < len; i++) {
        xzqmcs.push(yzdata[i].xzqhmc)
      }
      return xzqmcs
    },
    //获取当前行政区下各年份的统计数据。
    getCurrentXZQYearArray(data) {
      let ydatas = []
      for (let field in data) {
        if (field.startsWith('money')) {
          ydatas.push({ year: field.slice(5, 9), ydata: data[field] })
          //   ydatas.push({ year: field.slice(1, 5), ydata: (parseFloat(data[field]) / 10000).toFixed(2) })
        }
      }
      //JSArrayCompare是自己写的一个方法，用于排序
      ydatas.sort(globalcf.JSArrayCompare('year'))
      return ydatas
    },
    getXZQYearTZStaListData(yzdata) {
      let xzqmcs = []
      let len = yzdata.length
      for (let i = 0; i < len; i++) {
        xzqmcs.push(yzdata[i].tz_ztz)
        //   xzqmcs.push((parseFloat(yzdata[i].zmj) / 10000).toFixed(2))
      }
      return xzqmcs
    },
//高标准农田建成面积表格对应的数据。
    getYjcTable(data) {
      let cols = []
      let curdata = data[0]
      for (let field in curdata) {
        let field_ch = this.fieldArray_ch.find((item, index) => {
          return item.f_field == field
        })
        if (field === 'xzqhmc' || field === 'tz_ztz' || field.startsWith('money')) {
          cols.push({
            field: field,
            title: field_ch ? field_ch.f_fieldcn : field,
            align: 'center'
          })
        }
        //   if (field === 'xzqhdm' || field === 'xmcount'|| field === 'pcode'|| field === 'tz_zytz'|| field === 'tz_shtz'|| field === 'tz_dftz') {
        //   continue
        // } else if (field.startsWith('y')) {//面积信息不显示出来。
        //   continue
        // } else {
        //   cols.push({
        //     field: field,
        //     title: field_ch ? field_ch.f_fieldcn : field,
        //     align: 'center'
        //   })
      }

      cols.sort(globalcf.JSArrayCompare('field'))
      let colsLen = cols.length
      this.ArrIndextoFirst(cols, colsLen - 2)
      this.ArrIndextoFirst(cols, colsLen - 1)
      return cols

    },
    //获取投资信息
    getTouZiData(data) {
      let info = []
      for (let field in data) {
        if (!field.startsWith('tz_')) {
          continue
        } else if (field === 'tz_ztz') {
          continue
        }
        let field_ch = this.fieldArray_ch.find((item, index) => {
          return item.f_field == field
        })
        info.push({
          type: field,
          name: field_ch ? field_ch.f_fieldcn : field,
          value: data[field]
        })

      }
      return info

    },
    //面积坐标转换,高标准农田面积默认是亩.所以需要转换
    convertAreaunit(data, unitType) {
      let len = data.length
      for (let i = 0; i < len; i++) {
        let curdata = data[i]
        for (let field in curdata) {
          if (field.length === 5 && field.startsWith('y')) {//面积的
            if (unitType === '2') {//万亩
              curdata[field] = (parseFloat(curdata[field]) / 10000).toFixed(2)
            }
          }
          if (field.indexOf('zmj') > -1) {
            if (unitType === '2') {//万亩
              curdata[field] = (parseFloat(curdata[field]) / 10000).toFixed(2)
            }
          }
        }
      }
      return data
    },

    clickXZQ() {
      this.gbxzmShowType = 'xzq'
      this.$nextTick(() => {
        Bus.$emit('reInitXChartsWrapper')
        //   Bus.$emit('resizeXChartsWrapper')//必须resize一下表格，不然就会闪屏
      })
    },
    clickYear() {
      this.gbxzmShowType = 'year'

      this.$nextTick(() => {
        Bus.$emit('reInitXChartsWrapper')
        Bus.$emit('resizeXChartsWrapper')//必须resize一下表格，不然就会闪屏
      })
    },
    ArrIndextoFirst(arr, index) {
      if (index != 0) {
        arr.unshift(arr.splice(index, 1)[0])
      }
    }
  }
}
</script>

<style lang="css" scoped>
.el-col-lg-4-8 {
  width: 20%;
}

.sta-header {
  float: left;

}

.sta-header-xzq {
  /*float: right;*/
  font-size: 40px;
  display: inline-block;
  margin: 0 0 0 30vw;
  color: #357bd8;
}

.xzqDiv {
  float: right;
  width:200px;
  display: flex;
}
.xzqexplain{
  width: 100px;
}
.xzqlist{
  width: 150px;
}

::v-deep .xzqDiv .el-input--medium .el-input__inner {
  height: 26px;
  line-height: 26px;
  /*font-size: large;*/
  /*font-weight: bolder;*/
  /*background-color: #baf6d1;*/
}

.profileValue-label {
  font-size: 16px;
  padding-bottom: 5px;
}

.profileValue-value {
  font-size: 36px;
  font-weight: bolder;
  color: #357bd8;
}

.el-container {
  border: 1px #eee solid;
  border-radius: 4px;
}
</style>
<style lang="scss" scoped>
.ct-heigh50 {
  height: 50vh;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-header {
  height: 40px !important;
  line-height: 40px;
  font-size: 16px;
  font-weight: bolder;
  border-bottom: 1px solid #eee;
}

::v-deep {
  .xlabel-wrapper-left .label-title, .xlabel-wrapper-left1 .label-title, .xlabel-wrapper-left .label-unit, .xlabel-wrapper-left1 .label-unit {
    color: #fff;
  }

  .xlabel-wrapper-left > a {
    line-height: 0px;
  }

  .xchart-wrapper {
    min-height: 200px;
  }

  .xpanel-label, .xchart-wrapper, .xchart-title2 {
    background-color: rgba(255, 255, 255, 0);
    border: 0px;
    border-radius: 4px;
  }

  .fill-h {
    text-align: center;
  }

  .xchart-title2 {
    display: inline-block;
    padding: 0px 5px;
  }
}
</style>
